// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { h, fragment } from '@knno/dom/jsx';
import { Nodes } from '@knno/dom';
import { vars } from '@knno/ui/global.css';
import { Grid, UIGrid } from '@knno/ui/jsx/grid';
import { Pulldown } from '@knno/ui/jsx/pulldown';
import { genText } from './utils';
import { Dialog } from '@knno/ui/dialog';

function genData() {
	const result: unknown[][] = [];
	for (let i = 0; i < 50; i++) {
		result.push([i, genText()]);
	}
	return result;
}

function genList(lastId: number) {
	const result: string[] = [];
	for (let i = 1; i <= 30; i++) {
		result.push('Line' + (lastId + i));
	}
	return result;
}

export function ShowPulldown() {
	let gd: UIGrid;
	let timeDiv: Nodes;
	let lastId = 0;
	return (
		<>
			<h2>下拉刷新(耗时1秒)</h2>
			<Pulldown
				onRefresh={() => {
					return new Promise((resolve) => {
						setTimeout(() => {
							gd.rows(genData());
							resolve();
						}, 1000);
					});
				}}
			>
				<Grid
					ref={(g) => (gd = g)}
					columns={[
						{ key: 0, title: '列1' },
						{ key: 1, title: '列2' },
					]}
					rows={genData()}
				/>
			</Pulldown>
			<h2>下拉刷新</h2>
			<Pulldown
				onRefresh={function () {
					timeDiv.text(new Date().toLocaleString());
					return Promise.resolve();
				}}
			>
				<div
					style={{
						display: 'flex',
						alignItems: 'center',
						justifyContent: 'center',
						background: vars.color.pageBackground,
						fontSize: '2rem',
						WebkitUserSelect: 'none',
						userSelect: 'none',
					}}
					ref={(d) => (timeDiv = d)}
					onclick={() => {
						Dialog.alert('clicked');
					}}
				>
					{new Date().toLocaleString()}
				</div>
			</Pulldown>
			<h2>无限加载</h2>
			<Pulldown
				mouseScroll
				onRefresh={function () {
					const data = genList(0);
					lastId = data.length;
					this.html('').append(...data.map((n) => <div style={{ userSelect: 'none', padding: '1em' }}>{n}</div>));
					return Promise.resolve();
				}}
				onscrollbottom={function () {
					const data = genList(lastId);
					lastId += data.length;
					this.append(...data.map((n) => <div style={{ userSelect: 'none', padding: '1em' }}>{n}</div>));
				}}
			></Pulldown>
		</>
	);
}
